<template>
  <div>
    <van-nav-bar
      title="个人中心"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="profile-box">
      <div class="profile-info">
        <div class="img-box">
          <van-uploader :after-read="avaterAfterRead"
            ><img v-lazy="user.avatar_url" alt=""
          /></van-uploader>
        </div>
        <div class="info-box">
          <p class="isname" @click="nameClick">
            <label :style="showInput ? 'line-height:44px' : ''">昵称：</label>
            <input
              id="inputId"
              type="text"
              ref="nameInputRef"
              v-model="nameInput"
              v-if="showInput"
              @blur="nameBlur"
            />
            <span v-else>{{ user.name }}</span>
          </p>
          <p>登录名：{{ user.email }}</p>
          <p>个性签名：啥也不是</p>
        </div>
      </div>
      <div class="profile-item">
        <ul>
          <li @click="goTo('/collect')">
            <span>我的收藏</span><van-icon name="arrow" />
          </li>
          <li @click="goTo('/orderlist')">
            <span>我的订单</span><van-icon name="arrow" />
          </li>
          <li @click="goTo('/setting')">
            <span>帐号管理</span><van-icon name="arrow" />
          </li>
          <li @click="goTo('/address')">
            <span>地直管理</span><van-icon name="arrow" />
          </li>
          <li @click="goTo('/about')">
            <span>关于我们</span><van-icon name="arrow" />
          </li>
        </ul>
      </div>
      <van-button round type="primary" @click="logoutClick"
        >退出登录</van-button
      >
    </div>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { logout } from '../../network/logout'
import { getUser, editUserName, editHead } from '../../network/profile'
import { Toast } from 'vant'
import { onMounted, reactive, toRefs, nextTick } from 'vue'
export default {
  setup () {
    const router = useRouter()
    const state = reactive({
      user: {},
      nameInput: '',
      showInput: false
    })
    const init = () => {
      Toast.loading({ message: '加载中...', forbidClick: true })
      getUser().then(res => {
        console.log(res)
        state.user = res
        Toast.clear()
      })
    }
    onMounted(() => {
      init()
    })
    const nameClick = () => {
      state.showInput = true
      nextTick(_ => {
        document.getElementById('inputId').focus()
      })
    }
    const nameBlur = () => {
      if (state.nameInput.trim().length !== 0) {
        editUserName({ name: state.showInput })
        state.nameInput = ''
        init()
      }
      state.showInput = false
    }
    const logoutClick = () => {
      logout().then(res => {
        window.localStorage.clear()
        Toast.success('退出成功')
        router.push('/login')
      })
    }
    const goTo = (path, query) => {
      console.log(path)
      router.push({ path, query: query || {} })
    }
    const avaterAfterRead = (file) => {
      console.log(file.content)
      editHead({ avatar: file.content }).then(res => {
        console.log(res)
      })
    }
    const goBack = () => {
      router.go(-1)
    }
    return {
      ...toRefs(state),
      goBack,
      logoutClick,
      goTo,
      nameClick,
      nameBlur,
      avaterAfterRead
    }
  }
}
</script>
<style scoped lang="less">
.profile-box {
  padding: 5px 10px 0;
  height: 100vh;
  background-color: #f9f9f9;
  text-align: left;
  .profile-info {
    display: flex;
    justify-content: space-between;
    padding: 25px 20px;
    border-radius: 5px;
    background: linear-gradient(90deg, #31c7a7, #a1c7c7);
    box-shadow: 0 0 5px #269090;
    .img-box {
      width: 60px;
      height: 60px;
      img {
        width: 100%;
      }
    }
    .info-box {
      flex: 1;
      padding-left: 15px;
      p {
        line-height: 22px;
        color: #fff;
        font-size: 14px;
        input {
          padding-left: 5px;
          border: none;
          color: #000;
        }
      }
    }
  }
  .profile-item {
    margin-top: 35px;
    li {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      line-height: 40px;
      padding: 0 5px;
      margin-bottom: 20px;
      font-size: 14px;
      .van-icon {
        line-height: 40px;
      }
    }
  }
  .van-button {
    width: 100%;
    background-color: #31c7a7;
    border: none;
  }
}
</style>
